<template>
  <div>
    <h1>添加页面</h1>
    <table class="table table-bordered">
      
        <tbody>
          <tr>
            <td align="right">账号</td>
            <td><input type="text" v-model="ojbInfo.Name" /></td>
          </tr>
          <tr>
            <td align="right">密码</td>
            <td><input type="password" v-model="ojbInfo.Pwd" /></td>
          </tr>
          <tr>
            <td align="right">确认密码</td>
            <td><input type="password" v-model="Okpwd" /></td>
          </tr>
          <tr>
            <td align="right">手机号</td>
            <td>
              <input type="text" v-model="ojbInfo.Phone" maxlength="11" />
            </td>
          </tr>
          <tr>
            <td align="right">身份证</td>
            <td><input type="text" v-model="ojbInfo.Card" maxlength="18" /></td>
          </tr>
          <tr>
            <td align="right">生日</td>
            <td><input type="date" v-model="ojbInfo.Birthday" /></td>
          </tr>
          <tr>
            <td align="right">性别</td>
            <td>
              <input
                type="radio"
                name="sex"
                :value="1"
                v-model="ojbInfo.Sex"
              />男
              <input
                type="radio"
                name="sex"
                :value="0"
                v-model="ojbInfo.Sex"
              />女
            </td>
          </tr>
          <tr>
            <td align="right">积分</td>
            <td><input type="text" v-model="ojbInfo.Points" /></td>
          </tr>
          <tr>
            <td align="right">余额</td>
            <td><input type="text" v-model="ojbInfo.Money" /></td>
          </tr>
          <tr>
            <td align="right">会员等级</td>
            <td>
              <select v-model="ojbInfo.LId">    
                <option value="">请选择</option>
                <option v-for="item in ojbLevellist" :value="item.Id" >{{ item.LName }}</option>
              </select>
            </td>
          </tr>
          <tr>
            <td align="right"></td>
            <td><input type="button" value="添加" @click="ok"/></td>
          </tr>
        </tbody>
  
    </table>
  </div>
</template>

<script setup lang="ts">
import axios from "axios";
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";

//路由器对象 跳转并且传参
const router = useRouter();

//页面直接加载获取等级名称(下拉表)
onMounted(() => {
  GetLevelname();
});

//接受会员等级数据
let ojbLevellist: any = ref({});

//获取会员等级列表
const GetLevelname = () => {
  axios({
    url: "/api/Member/LevelList",
    method: "get",
  })
    .then((res) => {
      console.log(res);
      ojbLevellist.value = res.data;
    })
    .catch((arr) => {});
};

//向后端传递的数据
let ojbInfo = reactive({
  Id: 0,
  Name: "",
  Phone: "",
  Card: "",
  Birthday: "",
  Sex: 0,
  State: 0,
  Pwd: "",
  Money: 0,
  Points: 0,
  IsDeleted: true,
  LId: 0
  
});
//确认密码
let Okpwd = ref("");

//判断
const oo = ()=>{
   //1.验证非空+有效性
   if (ojbInfo.Name == "") {
    alert("账号不可为空");
    return;
  }
  if (ojbInfo.Pwd == "") {
    alert("密码不可为空");
    return;
  }
  if (Okpwd.value == "") {
    alert("确认密码不可为空");
    return;
  }
  if (ojbInfo.Pwd != Okpwd.value) {
    alert("两次密码不一致");
    return;
  }
  if (ojbInfo.Phone == "") {
    alert("手机号不可为空");
    return;
  }
  //是否是手机号
  let reg = /^1[3-9]\d{9}$/;
  if (reg.test(ojbInfo.Phone) == false) {
    alert("手机号不合法");
  }
  if (ojbInfo.Card == "") {
    alert("身份证不可为空");
    return;
  }
  //   let reg1 = /^\d{17}[0-9Xx]$/;
  //   if(reg1.test(ojbInfo.Card)){
  //     alert('身份证不合法');
  //     return;
  //   }

  if (ojbInfo.Birthday == "") {
    alert("生日不可为空");
    return;
  }
  if (ojbInfo.Points == "") {
    alert("积分不可为空");
    return;
  }
  //IsNan判断是否数字 如果是为false 如果否为true

  if (isNaN(Number(ojbInfo.Points)) == true) {
    alert("积分只能为数字");
    return;
  }

  if (ojbInfo.Money == "") {
    alert("余额不可为空");
  }

  if (isNaN(Number(ojbInfo.Money)) == true) {
    alert("余额只能为数字");
    return;
  }

}

//函数-------
//增加数据
const ok = () => {
 
  //2.发送网络请求将数据添加到数据库

  axios({
    url: "/api/Member/MemberAdd",
    method:"POST",
    data: ojbInfo
  })
    //发送网络请求成功时调用的函数 相当于Ajax success
    .then((res) => {
      console.log(res);
      if (res.data == -1) {
        alert("手机号重复");
        return;
      }
      if (res.data == -2) {
        alert("身份证重复");
        return;
      }
        //1.验证非空+有效性
   if (ojbInfo.Name == "") {
    alert("账号不可为空");
    return;
  }
  if (ojbInfo.Pwd == "") {
    alert("密码不可为空");
    return;
  }
  if (Okpwd.value == "") {
    alert("确认密码不可为空");
    return;
  }
  if (ojbInfo.Pwd != Okpwd.value) {
    alert("两次密码不一致");
    return;
  }
  if (ojbInfo.Phone == "") {
    alert("手机号不可为空");
    return;
  }
  //是否是手机号
  let reg = /^1[3-9]\d{9}$/;
  if (reg.test(ojbInfo.Phone) == false) {
    alert("手机号不合法");
  }
  if (ojbInfo.Card == "") {
    alert("身份证不可为空");
    return;
  }
      alert("添加成功");
      router.push("/memberList");
    })
    //发送网络请求失败时调用的函数 相当于Ajax
    .catch((arr) => {
      console.log(arr);
    });
};
</script>

<style scoped></style>
